<template lang="html">
  <div class="aside-container">
    <div class="aside">
      <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <div v-for="item in menus">
          <!-- 第一层 -->
          <div v-if="item.children && item.children.length">
            <el-submenu :index="(item.id).toString()">
              <template slot="title">{{item.name}}</template>
              <div v-for="itemOne in item.children">
                <!-- 第二层 -->
                <div v-if="itemOne.children && itemOne.children.length">
                  <el-submenu :index="(itemOne.id).toString()">
                    <template slot="title">{{itemOne.name}}</template>
                    <!-- 第三层 -->
                    <div v-for="itemTwo in itemOne.children">
                      <div v-if="itemTwo.children && itemTwo.children.length">
                        <el-submenu>
                          <template slot="title">{{itemTwo.name}}</template>
                        </el-submenu>
                      </div>
                      <div v-else>
                        <el-menu-item :index="(itemTwo.id).toString()">{{itemTwo.name}}</el-menu-item>
                      </div>
                    </div>
                  </el-submenu>
                </div>
                <div v-else>
                  <el-menu-item :index="(itemOne.id).toString()">{{itemOne.name}}</el-menu-item>
                </div>
              </div>
            </el-submenu>
          </div>
          <div v-else>
            <el-menu-item :index="(item.id).toString()">{{item.name}}</el-menu-item>
          </div>
        </div>
        <div v-if="hasMenu">
          <el-menu-item index="0" @click="toMenu">菜单</el-menu-item>
        </div>
      </el-menu>
    </div>
  </div>
</template>

<script>
import {
  getMenu
} from 'api/aside'

import {} from 'common/js/cache'

import {
  mapActions,
  mapGetters
} from 'vuex'

import {
  arrClassify
} from 'common/js/arrClassify'

export default {
  name: 'aside',
  data() {
    return {
      menus: [],
      hasMenu: false
    }
  },
  created() {
    getMenu().then((res) => {
      let menus = res.menus
      // 在初始登录的时候，判断有没有菜单，没有的话，就跳转到菜单页，进行菜单的添加，有的话就跳转到一个目录页(现在还不是很清楚这个目录页是干啥的)
      let length = menus.length
      this.hasMenu = Boolean(length)
      if (this.$route.name !== 'menu-container' && !length) {
        let path = menus.length ? 'article' : 'menu-container'
        this.$router.push('/home/' + path)
      }
      this.setMenusData(menus)
    })
  },
  computed: {
    ...mapGetters([
      'menusData'
    ])
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
    ...mapActions([
      'setMenusData'
    ]),
    toMenu() {
      this.$router.push('/home/menu-container')
    }
  },
  watch: {
    menusData(newVal) {
      this.menus = arrClassify(newVal)
      this.hasMenu = Boolean(this.menus.length)
    }
  }
}
</script>

<style lang="scss">
@import "~common/sass/variable.scss";
@import "~common/sass/mixin.scss";
.aside-container {
    width: 220px;
    background: $bg-login;
    overflow: hidden;
    .aside {
        @include hidden-scroll();
        .add-menu {
            width: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
            margin: 20px 0 20px 8px;
            button {
                width: 180px;
                height: 40px;
            }
        }
    }
}
</style>
